<template>
    <div class="ph-table-actionbar" :small="small">
        <div v-if="action.delChecked">
            <ph-button type="danger" icon="trash" @click="$emit('del-checked')">{{state.delAll}}</ph-button>
        </div>
        <div class="ph-action-right">
            <ph-dropdown 
                v-if="action.colFilter" 
                @action="onColFilter" 
                actionsheetTitle="表格列显隐"
                icon="filter" 
                align="left" 
                :title="state.colFilter" 
                :checkActions="cols" 
                :actionsheet="true"
                :multiple="true">
                <ph-dropdown-item v-for="th in ths" :action="th.key" :key="th.key">{{th.name}}</ph-dropdown-item>
            </ph-dropdown>
            <ph-dropdown v-if="action.export" icon="reply" :title="state.export" @action="onExport" align="left">
                <ph-dropdown-item action="xls">导出excel</ph-dropdown-item>
                <ph-dropdown-item action="csv">导出csv</ph-dropdown-item>
            </ph-dropdown>
            <ph-button v-if="action.print" icon="print"  @click="$emit('print')">{{state.print}}</ph-button>
        </div>
    </div>
</template>
<script lang="ts">
<<<<<<< HEAD
import { computed, defineAsyncComponent, defineComponent, PropType } from 'vue'
import {PhActionBar,PhButton} from '../base'
=======
import { computed, defineComponent, PropType } from 'vue'
import { PhButton } from 'ph-button'
>>>>>>> dev
import {ITh,TableAction} from './struct'
import {PhDropdown,PhDropdownItem} from 'ph-dropdown'
export default defineComponent({
    props:{
        small:Boolean,
        ths:{
            type: Array as PropType<Array<ITh>>,
            default:()=>[]
        },
        action:{
            type:Object as PropType<TableAction>,
            default:()=>({})
        }
    },
    components:{
        PhButton,
        PhDropdown,PhDropdownItem
    },
    setup(props,{emit}){
        const state = computed(()=>{
            const sm = props.small
            return {
                delAll:sm?"":"删除选中",
                colFilter:sm?"":"列筛选",
                export:sm?"":"导出",
                print:sm?"":"打印"
            }
        })
        const onExport = (v:string)=>emit('export',v)
        const onColFilter = (v:Array<string>)=>emit('col-filter',v)
        const cols = computed(()=>props.ths.map(th=>th.key))
        return {onExport,onColFilter,cols,state}
    }
})
</script>
<style lang="scss">
.ph-table-actionbar{
    padding: var(--ph-10) var(--ph-15);
    border-width: 1px ;
    border-style: solid;
    border-color: var(--ph-bd-light);
    color: var(--ph-c-d1);
    background-color: var(--ph-light-l1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    box-shadow: 0 1px var(--ph-5) rgb(0 0 0 / 8%);
    border-bottom: none;
    z-index: 2;
    .ph-action-right{
        & > :not(:first-child){
            margin-left: -1px;
        }
    }
    &[small=true]{
        .ph-action{
            min-width: auto;
        }
    }
}

</style>
